<template>
	<!-- 黑色启动 -->
	<div class="randy-start column" v-if="startLoadingStore.showStartLoading">
		<img src="../../assets/logo.png" class="logo" />
		<div class="loading">
			<p class="start-text animated fadeIn">{{ startLoadingStore.initStatus }}</p>
			<div class="loading-t animated fadeIn">
				<div class="ing" :style="{ width: startLoadingStore.initProgress + '%' }"></div>
			</div>
		</div>
	</div>
</template>
<script>
import { useStartLoadingStore } from "../../stores/startLoading";

export default {
	name: "StartLoading",
	setup() {
		const startLoadingStore = useStartLoadingStore();
		return {
			startLoadingStore
		};
	},
	mounted() {
		// 在组件挂载时触发系统初始化
		// 如果已经初始化过了，这个方法会直接返回
		this.startLoadingStore.initializeSystem();
	}
}
</script>

<style scoped="scoped">
.start-text {
	font-size: 12px;
	color: #888888;
	text-align: center;
	margin-bottom: 4px;
}

.ing {
	background-color: #74f2b8;
	height: 100%;
	width: 0%;
	border-radius: 100px;
	transition: all 0.5s linear;
}

.loading {
	margin-top: 170px;
}

.loading-t {
	width: 200px;
	height: 8px;

}

.randy-start,
.login_body {
	background-color: #000000;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	justify-content: center;
	align-items: center;
	z-index: 1024;
}

.logo {
	width: 100px;
	height: 100px;
}
</style>
